<template>
	<!-- 20230414 -->
	<view class="tab-around-cn" :class="{'sticky':sticky}" :style="{'top': offsetTop+'rpx'}">
		<!-- 组件内容 -->
		<view class="cn-content">
			<!-- 标签条 -->
			<view class="flex align-center justify-around">
				<!-- 单个标签 -->
				<view class="position-relative line-height-header" v-for="(item,index) in list1" :key="index"
					@click="click(index)">

					<!-- 文字 -->
					<view class="inline-block"
						:class="{'text-bold': index == active, 'text-b4' : colorType == 'black', 'text-ff': colorType == 'white'}"
						:style="{'font-size': (index == active ? parseInt(textSize) + 2 : textSize) + 'rpx'}"
						:id="'tabName'+index">{{item.name}}</view>

					<!-- 下划线 -->
					<view v-if="index == active" class="border-line"
						:style="{'width':lineWidthCopy +'rpx', 'height':lineHeight+'rpx', 'background':finalBorderColor}">
					</view>
				</view>
			</view>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	import common from '@/components/hzjc/utils/common.js'
	export default {
		data() {
			return {
				lineWidthCopy: this.lineWidth,
			}
		},
		props: {
			// 数据显示
			list: {
				type: Array,
				default: []
			},
			// 当 list 是一个 对象数组 时，通过 list-key 来指定 Object 中 key 的值作为选择器显示内容
			listKey: {
				type: String,
				default: 'name'
			},
			// 当前激活标签的索引
			active: {
				type: [Number, String],
				default: 0
			},
			// 文字大小，默认单位rpx
			textSize: {
				type: Number,
				default: 26
			},
			// 底部条颜色，默认主色
			lineColor: {
				type: String,
				default: ''
			},
			// 底部条宽度，默认单位rpx
			lineWidth: {
				type: Number,
				default: 40
			},
			// 底部条高度，默认单位rpx
			lineHeight: {
				type: Number,
				default: 4
			},
			// 文字颜色
			colorType: {
				type: String,
				default: 'black'
			},
			// 是否使用粘性定位布局
			sticky: { 
				type: Boolean,
				default: false
			},
			// 粘性定位布局下与顶部的最小距离，默认单位rpx
			offsetTop: { 
				type: Number,
				default: 0
			}
		},
		computed: {
			list1() {
				let array = []
				for (let i = 0; i < this.list.length; i++) {
					let obj = {}
					if (this.listKey) {
						obj.name = this.list[i][this.listKey]
					} else {
						obj.name = this.list[i]
					}
					array.push(obj)
				}
				return array
			},

			/**
			 * 最终下划线颜色
			 */
			finalBorderColor() {
				return this.lineColor ? this.lineColor : common.mainColor()
			}
		},

		mounted() {
			if (this.lineWidth === 'auto') this.getTabWidth(this.active)
		},
		methods: {
			// 获取选中元素宽度
			getTabWidth(index) {
				let info = uni.createSelectorQuery().select("#tabName" + index);
				info.boundingClientRect(data => {
					this.lineWidthCopy = common.px2rpx(data.width)
				}).exec()
			},
			/**
			 * 点击标签
			 * @param {Object} index
			 */
			click(index) {
				//更新选中状态
				this.$emit("update:active", index)
				//todo  异步问题
				if (this.lineWidth === 'auto') this.getTabWidth(index)

				// 回调（当前点击的索引）
				this.$emit('click', {
					index: index
				})
			}
		}
	}
</script>

<style scoped>
	/* 选中下划线 */
	.border-line {
		position: absolute;
		bottom: 18rpx;
		left: 50%;
		transform: translate(-50%, 0);
	}

	/* 吸顶 */
	.sticky {
		position: sticky;
		position: -webkit-sticky;
		position: -moz-sticky;
		position: -ms-sticky;
		position: -o-sticky;
		z-index: 998;
	}
</style>